<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="mfuny.ggongal.admin.report.LoginDao" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/js/jquery-jqplot/jquery.jqplot.css" />

<style type="text/css">
#loginReportTargetTable table td, .loginReportDetailTable td {
	border: 1px solid #bbbbbb;
}
</style>

<script src="resources/js/etc/loginReportDetail.js"></script>
<script src="resources/js/jquery-jqplot/jquery.jqplot.js"></script>
<script src="resources/js/jquery-jqplot/jquery.jqplot.min.js"></script>

<script src="resources/js/jquery-jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script src="resources/js/jquery-jqplot/plugins/jqplot.donutRenderer.min.js"></script>

<script src="resources/js/jquery-jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="resources/js/jquery-jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

<script src="resources/js/jquery-jqplot/plugins/jqplot.highlighter.min.js"></script>
<script src="resources/js/jquery-jqplot/plugins/jqplot.cursor.min.js"></script>

<script type="text/javascript">
    $(function() {
    	$("table[class=loginReportDetailTable]").find("td").attr("width", "5.6%");
        $("td[class=front]").attr("width", "10.4%");
        $("td[class=end]").attr("width", "11.2%");
    	init2();
    	
    	setPieChart("chart1", [
			["기혼", $("#marry_true").html() != "" ? parseInt($("#marry_true").html()) : 0],
    		["미혼", $("#marry_false").html() != "" ? parseInt($("#marry_false").html()) : 0]
    	]);
    	setPieChart("chart2", [
    		["남", $("#sex_man").html() != "" ? parseInt($("#sex_man").html()) : 0],
    		["여", $("#sex_woman").html() != "" ? parseInt($("#sex_woman").html()) : 0]
    	]);
    	setPieChart("chart3", [
    		[$("#age1").html(), $("#ageCount1").html() != "" ? parseInt($("#ageCount1").html()) : 0],
    		[$("#age2").html(), $("#ageCount2").html() != "" ? parseInt($("#ageCount2").html()) : 0],
    		[$("#age3").html(), $("#ageCount3").html() != "" ? parseInt($("#ageCount3").html()) : 0],
    		[$("#age4").html(), $("#ageCount4").html() != "" ? parseInt($("#ageCount4").html()) : 0],
    		[$("#age5").html(), $("#ageCount5").html() != "" ? parseInt($("#ageCount5").html()) : 0]
    	]);
    	setPieChart("chart4", [
    		[$("#area1").html(), $("#areaCount1").html() != "" ? parseInt($("#areaCount1").html()) : 0],
    		[$("#area2").html(), $("#areaCount2").html() != "" ? parseInt($("#areaCount2").html()) : 0],
    		[$("#area3").html(), $("#areaCount3").html() != "" ? parseInt($("#areaCount3").html()) : 0],
    		[$("#area4").html(), $("#areaCount4").html() != "" ? parseInt($("#areaCount4").html()) : 0],
    		[$("#area5").html(), $("#areaCount5").html() != "" ? parseInt($("#areaCount5").html()) : 0]
    	]);
    	setPieChart("chart5", [
    		[$("#job1").html(), $("#jobCount1").html() != "" ? parseInt($("#jobCount1").html()) : 0],
    		[$("#job2").html(), $("#jobCount2").html() != "" ? parseInt($("#jobCount2").html()) : 0],
    		[$("#job3").html(), $("#jobCount3").html() != "" ? parseInt($("#jobCount3").html()) : 0],
    		[$("#job4").html(), $("#jobCount4").html() != "" ? parseInt($("#jobCount4").html()) : 0],
    		[$("#job5").html(), $("#jobCount5").html() != "" ? parseInt($("#jobCount5").html()) : 0]
    	]);
    	
    	var totalData = new Array();
    	var time = new Array();
    	for(var i = 0; i < 24; i++) {
    		if(i == 23) {
    			totalData[i] = ($("#0").html() != "" ? parseInt($("#0").html()) : 0);
    		} else {
    			totalData[i] = ($("#"+(i+1)).html() != "" ? parseInt($("#"+(i+1)).html()) : 0);
    		}
    		time[i] = i + 1;
    	}
    	
    	setTotalChartForTime("totalChart", time, totalData);
    });
    
    function setPieChart(chartId, data) {
		var plot1 = $.jqplot(chartId, [data], {
			seriesDefaults : {
				renderer : $.jqplot.PieRenderer,
				rendererOptions : {
					showDataLabels : true,
					dataLabels: 'value'
				}
			},
			legend : {
				show : true,
				location : 's',
				placement: 'outside',
				rendererOptions: {
					numberRows: 3
				}
			}
		});
	}
	
	function setTotalChartForTime(chartId, x, data) {
		var plot1 = $.jqplot(chartId, [data], {
			animate: true,
			animateReplot: true,
			axes: {
				xaxis: {
					ticks: x,
					tickOptions: {
						formatString: "%.0f시"
					}
				}
			},
			highlighter: {
				show: true,
				sizeAdjust: 7.5
			},
			cursor: {
				show: false
			}
		});
	}
</script>

</head>
<body>

<!-- 차트 -->
<div id="chart1" style="width:193px;height:200px;float:left;"></div>
<div id="chart2" style="width:193px;height:200px;float:left;"></div>
<div id="chart3" style="width:193px;height:200px;float:left;"></div>
<div id="chart4" style="width:193px;height:200px;float:left;"></div>
<div id="chart5" style="width:193px;height:200px;float:left;"></div>
<br style="clear:both;"/><br/><br/><br/><br/>

<!-- 타겟별 -->
<table id="loginReportTargetTable" width="100%">
<tr>
<td width="20%" valign="top">
<table width="90%" cellspacing="0" cellpadding="5" style="text-align:center">
    <tr>
        <td class="table_titleHeight" colspan="2">결혼유무</td>
    </tr>
    <tr>
        <td>기혼</td>
        <td><span id="marry_true"></span></td>
    </tr>
    <tr>
        <td width="50%">미혼</td>
        <td width="50%"><span id="marry_false"></span></td>
    </tr>
</table>
</td>

<td width="20%" valign="top">
<table width="90%" cellspacing="0" cellpadding="5" style="text-align:center">
    <tr>
        <td class="table_titleHeight" colspan="2">성별</td>
    </tr>
    <tr>
        <td>남</td>
        <td><span id="sex_man"></span></td>
    </tr>
    <tr>
        <td width="50%">여</td>
        <td width="50%"><span id="sex_woman"></span></td>
    </tr>
</table>
</td>

<td width="20%" valign="top">
<table width="90%" cellspacing="0" cellpadding="5" style="text-align:center;">
    <tr>
        <td class="table_titleHeight" colspan="2">연령별</td>
    </tr>
    <tr>
        <td><span id="age1">&nbsp;</span></td>
        <td><span id="ageCount1"></span></td>
    </tr>
    <tr>
        <td><span id="age2">&nbsp;</span></td>
        <td><span id="ageCount2"></span></td>
    </tr>
    <tr>
        <td><span id="age3">&nbsp;</span></td>
        <td><span id="ageCount3"></span></td>
    </tr>
    <tr>
        <td><span id="age4">&nbsp;</span></td>
        <td><span id="ageCount4"></span></td>
    </tr>
    <tr>
        <td width="50%"><span id="age5">&nbsp;</span></td>
        <td width="50%"><span id="ageCount5"></span></td>
    </tr>
</table>
</td>

<td width="20%" valign="top">
<table width="90%" cellspacing="0" cellpadding="5" style="text-align:center;">
    <tr>
        <td class="table_titleHeight" colspan="2">지역별</td>
    </tr>
    <tr>
        <td><span id="area1">&nbsp;</span></td>
        <td><span id="areaCount1"></span></td>
    </tr>
    <tr>
        <td><span id="area2">&nbsp;</span></td>
        <td><span id="areaCount2"></span></td>
    </tr>
    <tr>
        <td><span id="area3">&nbsp;</span></td>
        <td><span id="areaCount3"></span></td>
    </tr>
    <tr>
        <td><span id="area4">&nbsp;</span></td>
        <td><span id="areaCount4"></span></td>
    </tr>
    <tr>
        <td width="50%"><span id="area5">&nbsp;</span></td>
        <td width="50%"><span id="areaCount5"></span></td>
    </tr>
</table>
</td>

<td width="20%" valign="top">
<table width="90%" cellspacing="0" cellpadding="5" style="text-align:center;">
    <tr>
        <td class="table_titleHeight" colspan="2">직업별</td>
    </tr>
    <tr>
        <td><span id="job1">&nbsp;</span></td>
        <td><span id="jobCount1"></span></td>
    </tr>
    <tr>
        <td><span id="job2">&nbsp;</span></td>
        <td><span id="jobCount2"></span></td>
    </tr>
    <tr>
        <td><span id="job3">&nbsp;</span></td>
        <td><span id="jobCount3"></span></td>
    </tr>
    <tr>
        <td><span id="job4">&nbsp;</span></td>
        <td><span id="jobCount4"></span></td>
    </tr>
    <tr>
        <td width="60%"><span id="job5">&nbsp;</span></td>
        <td width="40%"><span id="jobCount5"></span></td>
    </tr>
</table>
</td>

</tr>
</table>

<br/>

<table width="100%" align="center" style="text-align:center;clear:both;">
    <tr>
        <td id="yearAndMonth" style="font-size:11pt;"></td>
    </tr>
</table>
<!-- 토탈차트 -->
<div id="totalChart" style="width:100%;height:200px;"></div>
<br/>

<!-- 토탈 -->
<table class="loginReportDetailTable" width="100%" cellpadding="5" cellspacing="0" align="center" style="text-align:center;">
    <tr class="table_title">
        <td class="front">시간</td>
        <c:forEach begin="0" end="12" varStatus="stat">
            <td>${stat.index }</td>
        </c:forEach>
    </tr>
    <tr>
        <td class="front">접속수</td>
        <c:forEach begin="0" end="12" varStatus="stat">
            <td><span id="${stat.index }"></span></td>
        </c:forEach>
    </tr>
</table>

<br/>

<table class="loginReportDetailTable" width="100%" cellpadding="5" cellspacing="0" align="center" style="text-align:center;">
    <tr class="table_title">
        <td class="front">시간</td>
        <c:forEach begin="13" end="23" varStatus="stat">
            <td>${stat.index }</td>
        </c:forEach>
        <td class="end">합계</td>
    </tr>
    <tr>
        <td class="front">접속수</td>
        <c:forEach begin="13" end="23" varStatus="stat">
            <td><span id="${stat.index }"></span></td>
        </c:forEach>
        <td class="end"><span id="sum"></span></td>
    </tr>
</table>

<div id="json" style="display:none;">${loginList }</div>

</body>
</html>